Hey everybody. I'm not on here often and I have an issue with my profile background images not lining up properly.(Look and see and you'll understand). I coded this profile myself (self taught about 7 years ago..it's a mess, but mostly functional lol) and I recently changed ONLY these 2 background images and nothing else (making sure that these images were the same size as the ones used previously) .. And .. Well.. Since I haven't even looked at html and CSS in 7 yrs, I'm completely oblivious about what the issue is. Therefore I'm in need of anyone who's willing to look through this coding mess, or provide a possible solution, and help me fix this very simple problem that's driving me crazy. Thanks :) https://subeta.net/users/Dawniefer
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
i'm not sure what you mean by "not lining up properly." the background image looks excessively enlarged, so i'm not sure what "proper" alignment would look like. could you share your profile code and explain what you're trying to do?
I made 2 images, and they're supposed to be on top of each other and lined up but they aren't http://i.imgur.com/2l6KHw9.jpg http://i.imgur.com/j5KgOwo.jpg
Here's the code for that section
body {background-image:url(http://i.imgur.com/2l6KHw9.jpg); background-repeat: no-repeat;width: 1200px; height: 1000px; background-attachment: scroll; background-color: transparent;}html {background-image: url(http://i.imgur.com/j5KgOwo.jpg); background-color:; background-repeat: repeat-y;}
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
We don't have to use the HTML and body two-backgrounds hack anymore :D
You can remove all of this html {
background-image: url(http://i.imgur.com/j5KgOwo.jpg);
background-color: ;
background-repeat: repeat-y;
}
body {
background-image: url(http://i.imgur.com/2l6KHw9.jpg);
background-repeat: no-repeat;
width: 1200px;
height: 1000px;
background-attachment: scroll;
background-color: transparent;
}
And instead use this body {
width: 1200px;
height: 1000px;
background: url(http://i.imgur.com/2l6KHw9.jpg) no-repeat,
url(http://i.imgur.com/j5KgOwo.jpg) repeat-y;
background-color: ;
}
Lol! Now you see how long it's been since I've coded on here ?. I can't try the code until I'm off work, but will your code line up my images correctly? I appreciate this deeply! This helps so much! I'll message you again in 5yrs if they change it again lol ?
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
Yeah things have gotten much better! They should line up since the images are the same height, let me know though.
I cannot imagine what is wrong with it, but it's still messed up somehow. I think my issue is that somehow the top image is sized differently in the coding. It's much smaller than the bottom image even though the actual image sizes are identical. Notice how the image overlaps at the top middle and makes it look like its separating the columns? And at the bottom left the border is bigger?
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
I'm not seeing anything off, can you post a screenshot?
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
Okay, this is curious, may I ask what browser are you using?
Chrome 75 for Android
Get Alerted About New Avatar Contests On The Kumos Site: Join Here
Normally being this verbose isn't necessary, but it might work. (found a bug report related to background image heights) body {
width: 1200px;
height: 1200px;
background: url(http://i.imgur.com/2l6KHw9.jpg) top left/1200px 1200px no-repeat, url(http://i.imgur.com/j5KgOwo.jpg) top left/1200px 1200px repeat-y;
background-color: ;
}
If I didn't already have 3 kids, I'd name my 4th one after whatever your real name is! lol (((Hugs))). I can't express enough how much I appreciate you! Most people cause me anxiety.. you prevented it ??✌?? Thanks So Much!! Go look!
Get Alerted About New Avatar Contests On The Kumos Site: Join Here